<template>
    <el-dialog title="选择服务包" :model-value="visible" @close="emitClose" width="800px">
        <!-- 卡片列表 -->
        <div class="service-pack-list">
            <el-card v-for="item in currentPageList" :key="item.id" class="service-pack-card">
                <!-- 左上角复选框 -->
                <template #header>
                    <el-checkbox v-model="item.checked" />
                </template>

                <!-- 右上角状态角标 -->
                <div class="status-tag" :class="item.state === 1 ? 'using' : 'pending'">
                    {{ item.state === 1 ? '使用中' : '已停用' }}
                </div>

                <!-- 卡片内容区 -->
                <div class="card-content">
                    <div class="service-avatar" :style="{
                        backgroundImage: `url(${item.image})`,
                        backgroundSize: 'cover',
                        backgroundPosition: 'center'
                    }">
                    </div>
                    <div>
                        <div class="name">{{ item.name }}</div>
                        <div class="service-object">服务对象：{{ item.client }}</div>
                        <div class="service-tags">
                            <el-tag v-for="tag in item.tagIds" :key="tag._id" size="small">
                                {{ tag.name }}
                            </el-tag>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 分页组件 -->
        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="6"
                layout="total, prev, pager, next" :total="servicePackList.length" />
        </div>

        <!-- 底部按钮 -->
        <template #footer>
            <el-button @click="emitClose">取消</el-button>
            <el-button type="primary" @click="emitConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElDialog, ElCard, ElCheckbox, ElButton, ElPagination, ElTag } from 'element-plus';
import { findPackApi } from '../../api/servicePack';

// 接收父组件的显示状态
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});

// 定义自定义事件
const emit = defineEmits(['close', 'confirm']);

// 扩展的服务包数据结构
const servicePackList = ref([
    // {
    //     id: 1,
    //     name: '基础包',
    //     serviceObject: '所有人',
    //     services: ['随访服务', '常规护理'],
    //     status: 'using',
    //     checked: false
    // },
]);

// 分页逻辑
const page = ref(1);
const pageSize = ref(6);

// 计算当前页数据
const currentPageList = computed(() => {
    const start = (page.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return servicePackList.value.slice(start, end);
});

// 页码切换事件
const handleCurrentChange = (val) => {
    page.value = val;
};


// 通知父组件关闭弹窗
const emitClose = () => {
    servicePackList.value.forEach(item => (item.checked = false));
    emit('close');
};

// 通知父组件确认选择
const emitConfirm = () => {
    // 筛选出【选中的服务包】
    const selectedItems = servicePackList.value.filter(item => item.checked);
    // 通知父组件
    emit('confirm', selectedItems);
    emitClose();
};

searchAllServicePack()
// 获取全部服务包
function searchAllServicePack() {
    findPackApi({})
        .then(res => {
            if (res.code === 200) {
                servicePackList.value = res.data.rows.map(item => ({
                    ...item,         // 保留原有字段
                    checked: false  // 新增选中状态，默认未选中
                }));
            }
        })
}

</script>

<style scoped>
.service-pack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.service-pack-card {
    width: calc((100% - 30px) / 2);
    position: relative;
}

/* 状态角标 */
.status-tag {
    position: absolute;
    top: 22px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
}

.status-tag.using {
    background-color: #42b983;
}

.status-tag.pending {
    background-color: #E55A5A;
}

/* 卡片内容 */
.service-avatar {
    width: 70px;
    /* 头像尺寸 */
    height: 70px;
    border-radius: 50%;
    /* 圆形头像 */
    margin-right: 16px;
    /* 与文字的间距 */
    background-size: cover;
    /* 图片覆盖容器 */
    background-position: center;
    /* 图片居中 */
}

.card-content {
    display: flex;
    /* 启用Flex布局 */
    align-items: center;
    /* 垂直居中 */
    padding: 16px;
    /* 保持内边距 */
    margin-top: -50px;
}

.card-text {
    display: flex;
    /* 启用Flex */
    flex-direction: column;
    /* 垂直排列 */
    flex: 1;
    /* 占满剩余宽度 */
}

.name {
    font-size: 16px;
    font-weight: 500;
    /* 加粗 */
    margin-bottom: 4px;
    /* 与服务对象的间距 */
}

.service-object {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

/* 服务项标签 */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
</style>
<style>
.el-card__header {
    border-bottom: none !important;
}
</style>